<template>
    <!-- <view class="home-head" :style="{'padding-top': statusBarHeight + 'px'}" -->
    <view
        class="home-head"
        style="padding-top: 120rpx"
        :class="isgaokao == 1 && userAllInfo.graduate_time != restime ? 'home-head-isgaokao' : ''"
    >
        <!-- 流星雨动画 -->
        <div class="meteor-shower">
            <image class="meteor" src="https://mcdn.chatgk.com/xcx/static/images/icon/meteor-image.png" mode=""></image>
            <image class="meteor" src="https://mcdn.chatgk.com/xcx/static/images/icon/meteor-image.png" mode=""></image>
            <image class="meteor" src="https://mcdn.chatgk.com/xcx/static/images/icon/meteor-image.png" mode=""></image>
            <image class="meteor" src="https://mcdn.chatgk.com/xcx/static/images/icon/meteor-image.png" mode=""></image>
            <image class="meteor" src="https://mcdn.chatgk.com/xcx/static/images/icon/meteor-image.png" mode=""></image>
        </div>
        <div class="xcxName" :class="fontColor ? 'afontcolor' : ''">
            {{ name }}
        </div>
        <view class="home-top" :style="{ 'background-color': backgroundColor }">
            <!-- 地区 -->
            <view style="min-width: 130rpx">
                <view class="area-box" @tap="seleArea">
                    <text class="area-title" :class="fontColor ? 'afontcolor' : ''">{{ province }}</text>
                    <image
                        src="https://mcdn.chatgk.com/xcx/static/images/icon/down.png"
                        style="height: 30rpx; width: 30rpx; margin-left: 4rxp"
                    ></image>
                </view>
                <view class="" v-if="isgaokao == 1">
                    <text class="area-title" :class="fontColor ? 'afontcolor' : ''">高考版</text>
                </view>
                <view v-if="gaokaoDays != 0 && isgaokao != 1" class="day-box">
                    <view class="" style="display: flex; flex-direction: column">
                        <text class="day-title" :class="fontColor ? 'afontcolor' : ''">距离</text>
                        <text class="day-title" :class="fontColor ? 'afontcolor' : ''">高考</text>
                    </view>
                    <view class="" style="position: absolute; left: 50rpx; top: 10rpx">
                        <text class="day-title" style="font-size: 26rpx" :class="fontColor ? 'afontcolor' : ''">
                            {{ gaokaoDays }}天
                        </text>
                    </view>
                </view>
            </view>
            <!-- 搜索 -->
            <view class="search-box" @tap="onClickHomeSearch">
                <image
                    style="width: 28rpx; height: 28rpx"
                    src="https://mcdn.chatgk.com/xcx/static/images/home/home-search-img.png"
                    mode="aspectFit"
                ></image>
                <text class="search-placeholder">院校/职业/专业/资讯</text>
            </view>

            <!-- 天数 -->
            <view class="homeheadicon">
                <view class="" @tap="tapqun">
                    <image
                        v-if="newMessage > 0 && !fontColor"
                        src="https://mcdn.chatgk.com/xcx/static/images/kefu/haveNewmessage.png"
                        style="height: 40rpx; width: 40rpx"
                        mode=""
                    ></image>
                    <image
                        v-else-if="newMessage == 0 && !fontColor"
                        src="https://mcdn.chatgk.com/xcx/static/images/kefu/kefuzuo.png"
                        style="height: 40rpx; width: 40rpx"
                        mode=""
                    ></image>
                    <image
                        v-else-if="newMessage > 0 && fontColor"
                        src="https://mcdn.chatgk.com/xcx/static/images/kefu/kfheidian.png"
                        style="height: 40rpx; width: 40rpx"
                        mode=""
                    ></image>
                    <image
                        v-else-if="newMessage == 0 && fontColor"
                        src="https://mcdn.chatgk.com/xcx/static/images/kefu/kfhei.png"
                        style="height: 40rpx; width: 40rpx"
                        mode=""
                    ></image>
                </view>

                <view class="" @tap="linkPageMYmsg">
                    <image
                        v-if="count > 0 && !fontColor"
                        src="https://mcdn.chatgk.com/xcx/static/images/kefu/news.png"
                        style="height: 40rpx; width: 40rpx"
                    ></image>
                    <image
                        v-else-if="count == 0 && !fontColor"
                        style="height: 40rpx; width: 40rpx"
                        src="https://mcdn.chatgk.com/xcx/static/images/kefu/yidu.png"
                        mode=""
                    ></image>
                    <image
                        v-else-if="count > 0 && fontColor"
                        style="height: 40rpx; width: 40rpx"
                        src="https://mcdn.chatgk.com/xcx/static/images/kefu/megheidian.png"
                        mode=""
                    ></image>
                    <image
                        v-else-if="count == 0 && fontColor"
                        style="height: 40rpx; width: 40rpx"
                        src="https://mcdn.chatgk.com/xcx/static/images/kefu/msghei.png"
                        mode=""
                    ></image>
                </view>
            </view>
        </view>
        <view :class="isgaokao == 1 && userAllInfo.graduate_time != restime ? 'view-top-bgg' : 'view-top-bg'">
            <view
                class="view-top-1"
                :style="isgaokao == 1 && userAllInfo.graduate_time != restime ? 'margin-top: 0rpx;' : ''"
            >
                <view class="chat">
                    <view class="img">
                        <image
                            class="homeChatImg"
                            src="https://mcdn.chatgk.com/xcx/static/images/home/homeChat.png"
                            mode=""
                        ></image>
                    </view>
                    <view class="information flex-column">
                        <view class="top flex-row">
                            <!-- <text class="schoolnum">
	                                {{schoolnum}}
	                            </text> -->
                            <uv-count-to
                                class="schoolnum"
                                :duration="1000"
                                :color="color"
                                :bold="true"
                                :startVal="0"
                                :endVal="Number(schoolnum)"
                                :autoplay="true"
                                customStyle="padding-bottom: -40rpx;"
                            ></uv-count-to>
                            <text class="num">{{ zy_type != 3 ? '组' : '所' }}</text>
                        </view>
                        <view class="bottom">
                            <text class="school">适合我的大学</text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="view-top-2">
                <view class="info space-between">
                    <!-- 批次 -->
                    <view class="info-1 flex-column" @tap.stop="navpici">
                        <view class="info-1-top flex-row">
                            <text class="text">批次</text>
                            <image
                                class="info-1-image"
                                src="https://mcdn.chatgk.com/xcx/static/images/home/homexiugai.png"
                            ></image>
                        </view>
                        <view class="info-1-bottom">
                            <text class="text">{{ userInfo.batch || '' }}</text>
                        </view>
                    </view>

                    <!-- 成绩、位次 -->
                    <view class="info-2 flex-column" @tap="onClickScore">
                        <view class="info-2-top flex-row">
                            <text class="text">成绩</text>
                            <text class="text">{{ score }} 分</text>
                            <image
                                class="info-2-image"
                                v-if="(score_gkb != 1 && isgaokao == 1) || isgaokao != 1"
                                src="https://mcdn.chatgk.com/xcx/static/images/home/homexiugai.png"
                            ></image>
                        </view>
                        <view class="info-2-bottom flex-row">
                            <text class="text">{{ isgaokao == 1 ? (userInfo.section || '') + '位' : '' }}</text>
                            <text class="text">{{ userInfo.sgname }}</text>
                        </view>
                    </view>

                    <!-- 志愿表 -->
                    <view class="info-3 flex-column" @tap="navzhiyuan">
                        <view class="info-3-top flex-row">
                            <text class="text">志愿表</text>
                        </view>
                        <view class="info-3-bottom">
                            <text class="text">
                                {{ isgaokao == 1 && userAllInfo.graduate_time != restime ? '0' : volunteerNum }}张
                            </text>
                        </view>
                    </view>
                </view>
            </view>

            <view :class="isgaokao == 1 && userAllInfo.graduate_time != restime ? 'view-top-33' : 'view-top-3'">
                <view class="view-top-3-center">
                    <view
                        class="zhinengyijian"
                        v-if="(isgaokao != 1 || userAllInfo.graduate_time == restime) && !!userAllInfo.score"
                    >
                        <view class="top-3-box zhinengtianbaobutton" @tap="zhinengTianbao">
                            <image
                                class="zntb-img"
                                src="https://mcdn.chatgk.com/xcx/static/images/home/zhinengtianbao.png"
                                mode=""
                            ></image>
                            <text class="top-3-box-t top-3-box-t-zn">智能填报</text>
                        </view>

                        <view class="top-3-box top-3-boxing" @tap="onClickFillIn">
                            <text class="top-3-box-t">一键填报</text>
                        </view>
                    </view>

                    <view class="top-3-boxs top-3-boxs-set" @tap="onClickScore" v-else>
                        <text class="top-3-box-ts" style="color: #ff3b0a">+ 设置我的成绩</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <isgkb @colse_gkb="colse_gkb" v-if="gaokaoshow"></isgkb>
</template>

<script>
import userManager from '@/common/manager/user-manager.js';
import request from '@/common/request/api.js';
import xcxInfo from '@/common/manager/xcxInfo.js';
export default {
    name: 'homeHead',
    emits: ['changeGaokaoShow'],
    props: {
        changeisgaokao: {
            type: [String, Number],
            default: '0'
        },
        volunteerinfo: {
            type: Number,
            default: 0
        },
        schoolNumber: {
            type: Number,
            default: 0
        },
        zy_type: {
            type: Number,
            default: 0
        },
        province: {
            typeof: String,
            default: '北京'
        },
        userInfo: {
            type: Object,
            default: {}
        },
        gaokaoDays: {
            type: Number,
            default: 0
        },
        backgroundColor: {
            type: String,
            default: 'rgba(255, 100, 48, 1)'
        },
        fontColor: {
            type: Boolean,
            default: false
        },
        count: {
            type: Number,
            default: 0
        },
        newMessage: {
            type: Number,
            default: 0
        },
        gk_restime: {
            type: String,
            default: ''
        }
    },

    data() {
        return {
            restime: uni.getStorageSync('isGKB_graduate_time'),
            gaokaoshow: false,
            color: 'white',
            statusBarHeight: 20,
            homeOHeadHeight: 200.0,
            homeHeadHeight: 720,
            homeAreaName: '',
            // homeDayNumber: "120",
            homeDanumNumber: '500',
            score: '', // 成绩
            searchKey: '',
            // backgroundColor:'rgba(41, 73, 255, 1.0)'
            shadowstyle: '4rpx 4rpx 8rpx rgba(0, 0, 0, 0.2);',
            volunteerNum: 0,
            schoolnum: 0,
            isgaokao: 0,
            userAllInfo: {},
            score_gkb: '',
            name: xcxInfo.name
            // zy_type: 0
        };
    },
    computed: {
        isBatch() {
            return this.userInfo.batch?.includes('段') ? '报考段' : '批次';
        }
    },
    created() {
        const _systemInfo = uni.getSystemInfoSync();
        const _statusBarHeight = _systemInfo.statusBarHeight;
        const _windowWidth = _systemInfo.windowWidth;
        this.statusBarHeight = _statusBarHeight;
        // this.homeHeadHeight = _statusBarHeight + (_windowWidth / 400.0) * this.homeOHeadHeight;
    },
    mounted() {
        this.isgaokao = uni.getStorageSync('isGKB');
        if (getApp().globalData.userInfo) {
            let this_ = this;
            uni.$once('changescore', function () {
                this_.isgaokao = uni.getStorageSync('isGKB');
                this_.score_gkb = getApp().globalData.userInfo.score_gkb;
                if (this_.score_gkb == 0 && this_.isgaokao == 1) {
                    uni.navigateTo({
                        url: '/subpackages/subpackage1/pages/score/home-score'
                    });
                }
            });
        }

        if (getApp().globalData.userInfo) {
            this.userAllInfo = getApp().globalData.userInfo;
            this.isgaokao = uni.getStorageSync('isGKB');
            this.score_gkb = getApp().globalData.userInfo.score_gkb;
        }
    },
    watch: {
        gk_restime: {
            handler(newVal) {
                this.restime = newVal;
            }
        },
        volunteerinfo: {
            handler(newVal, oldVal) {
                this.volunteerNum = newVal;
                // if (newVal) { //暂时注释
                // 	this.volunteerNum = newVal
                // }
                // immediate: true
                // deep: true
            }
        },
        changeisgaokao: {
            handler(newval) {
                this.isgaokao = newval;
            },
            immediate: true,
            deep: true
        },
        userInfo: {
            handler(newVal, oldVal) {
                if (Object.keys(newVal).length > 0) {
                    this.userAllInfo = getApp().globalData.userInfo;

                    this.userAllInfo = getApp().globalData.userInfo;
                    this.isgaokao = uni.getStorageSync('isGKB');
                    this.score_gkb = getApp().globalData.userInfo.score_gkb;

                    if (newVal.province) {
                        if (this.isgaokao == 1) {
                            if (this.userAllInfo.graduate_time == this.restime) {
                                this.schoolnum = this.schoolNumber;
                                this.volunteerNum = this.volunteerinfo;
                                this.score = this.userAllInfo.score;
                                // this.getSchoolNumber()
                            } else {
                                this.schoolnum = 0;
                                this.score = '-';
                                this.volunteerNum = 0;
                            }
                        } else {
                            this.schoolnum = this.schoolNumber;
                            // this.getSchoolNumber()
                            this.score = this.userAllInfo.score;
                            this.volunteerNum = this.volunteerinfo;
                        }
                    }
                } else {
                    this.userAllInfo = {};
                    this.score = 0;
                    this.schoolnum = '000';
                    this.volunteerNum = 0;
                }
            },
            immediate: true,
            deep: true
        },

        schoolNumber: {
            handler(newVal) {
                if (newVal != null) {
                    if (this.isgaokao == 1) {
                        this.restime = uni.getStorageSync('isGKB_graduate_time');

                        if (this.userAllInfo.graduate_time == this.restime) {
                            this.schoolnum = newVal;
                            this.score = this.userAllInfo.score;
                        } else {
                            this.schoolnum = 0;
                            this.score = '-';
                        }
                    } else {
                        this.schoolnum = newVal;
                        this.score = this.userAllInfo.score;
                    }
                }
            },
            deep: true,
            immediate: true
        }
    },

    methods: {
        handleGaokaoshow(type) {
            this.$emit('changeGaokaoShow', type);
        },
        linkPageMYmsg() {
            if (userManager.isLogin()) {
                uni.navigateTo({
                    url: './zixuntuijian?count=' + this.count
                });
            }
        },
        colse_gkb() {
            this.gaokaoshow = false;
        },
        tapqun() {
            uni.navigateTo({
                // url: '/subpackages/subpackage2/pages/tabBar/home/push'
                url: '/subpackages/subpackage1/pages/customerService/customerService'
            });
        },
        navpici() {
            if (!userManager.isLogin()) {
                return;
            }
            uni.navigateTo({
                url: '/subpackages/subpackage1/pages/chancePage/chanceSearch/change-pici?text=' + this.userInfo.batch
            });
        },
        navzhiyuan() {
            uni.navigateTo({
                url: '/subpackages/subpackage1/pages/tabBar/wode/zhiyuanbiaoList/zhiyuanbiaoList'
            });
        },
        getSchoolNumber() {
            const data = {};
            data['pid'] = this.userInfo.pid;
            data['less'] = '1';

            request.batchlineInfo(data).then((res) => {
                let obj = {};
                res.data.batches.forEach((item) => {
                    if (item.batch == getApp().globalData.userInfo.batch) {
                        obj.batchLine = item.score;
                    }
                });
                obj.batch = getApp().globalData.userInfo.batch;
                request.schoolEnrollChance(obj).then((res) => {
                    this.schoolnum =
                        res.data.summary.chance_lv_1 + res.data.summary.chance_lv_2 + res.data.summary.chance_lv_3;
                });
            });
        },
        zyList() {
            let data = {
                mod: 2,
                fronttype: 3,
                isStudentSee: 1
            };
            this.$request.zyList(data).then((res) => {
                this.zyList = res.data;
            });
        },
        shadowFun() {
            if (this.fontColor) {
                return '4rpx 4rpx 8rpx rgba(0, 0, 0, 0.2);';
            } else {
                return 'none';
            }
        },
        // 点击开通VIP
        onClickOpenVIP() {
            if (userManager.isLogin()) {
                uni.switchTab({
                    url: '/pages/tabBar/wode/vip-details-copy'
                });
            }
        },
        seleArea() {
            if (Object.keys(this.userInfo).length < 1) {
                uni.navigateTo({
                    url: './shenglistsub'
                });
            }
        },
        onClickHomeSearch() {
            if (userManager.isLogin()) {
                uni.navigateTo({
                    url: '/pages/tabbarSearch/searchpage'
                });
            }
        },
        onClickScore() {
            if (uni.getStorageSync('is_visitor') == 1) {
                uni.navigateTo({
                    url: '/pages/login/login-home'
                });
            } else {
                if (userManager.isLogin()) {
                    if (this.userInfo.pid) {
                        let restime = uni.getStorageSync('isGKB_graduate_time');
                        if (this.isgaokao == 1 && getApp().globalData.userInfo.graduate_time != restime) {
                            // this.gaokaoshow = true
                            this.handleGaokaoshow(true);
                            return;
                        }
                        if (this.score_gkb == 1 && this.isgaokao == 1) {
                            return;
                        }
                        uni.navigateTo({
                            url: '/subpackages/subpackage1/pages/score/home-score' //?data=' + JSON.stringify({"pid":this.userInfo.pid, "province":this.userInfo.province, "type":this.userInfo.xk_type, "grade":this.userInfo.grade, "score":this.userInfo.score, "sgid":this.userInfo.sgid})
                        });
                    } else {
                        uni.navigateTo({
                            url: '/subpackages/subpackage2/pages/login/perfect-info'
                        });
                    }
                }
            }
        },
        onClickFillIn() {
            if (uni.getStorageSync('is_visitor') == 1) {
                uni.navigateTo({
                    url: '/pages/login/login-home'
                });
            } else {
                if (userManager.isLogin()) {
                    if (this.userInfo.pid) {
                        let restime = uni.getStorageSync('isGKB_graduate_time');
                        if (this.isgaokao == 1 && getApp().globalData.userInfo.graduate_time != restime) {
                            // this.gaokaoshow = true
                            this.handleGaokaoshow(true);
                            return;
                        }
                        uni.navigateTo({
                            url: '/subpackages/subpackage1/pages/zhinengtianbao/yijiantianbao'
                        });
                    } else {
                        uni.navigateTo({
                            url: '/subpackages/subpackage2/pages/login/perfect-info'
                        });
                    }
                }
            }
        },
        zhinengTianbao() {
            if (uni.getStorageSync('is_visitor') == 1) {
                uni.navigateTo({
                    url: '/pages/login/login-home'
                });
            } else {
                if (userManager.isLogin()) {
                    if (this.userInfo.pid) {
                        let restime = uni.getStorageSync('isGKB_graduate_time');
                        if (this.isgaokao == 1 && getApp().globalData.userInfo.graduate_time != restime) {
                            // this.gaokaoshow = true
                            this.handleGaokaoshow(true);
                            return;
                        }
                        uni.navigateTo({
                            url: '/subpackages/subpackage1/pages/zhinengtianbao/zhinengtianbao'
                        });
                    } else {
                        uni.navigateTo({
                            url: '/subpackages/subpackage2/pages/login/perfect-info'
                        });
                    }
                }
            }
        }
    }
};
</script>

<style lang="less" scoped>
.home-head {
    // padding: 0rpx 32rpx 0 32rpx;
    width: 100vw;
    height: 640rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('https://mcdn.chatgk.com/xcx/static/images/home/shouyebg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.meteor-shower {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 640rpx;
    /* 确保流星雨不影响其他页面元素的交互 */
    pointer-events: none;
}

.meteor {
    position: absolute;

    opacity: 1;
    animation: meteor-fall linear infinite;
}

.meteor:nth-child(1) {
    width: 190rpx;
    height: 190rpx;
}

.meteor:nth-child(2) {
    width: 170rpx;
    height: 170rpx;
}

.meteor:nth-child(3) {
    width: 200rpx;
    height: 200rpx;
}

.meteor:nth-child(4) {
    width: 150rpx;
    height: 150rpx;
}

.meteor:nth-child(5) {
    width: 180rpx;
    height: 180rpx;
}

@keyframes meteor-fall {
    0% {
        transform: translate(calc(50vw - 50rpx), -50rpx) rotate(0deg);
    }

    100% {
        transform: translate(0rpx, 640rpx) rotate(360deg);
    }
}

/* 为了生成多个流星，你可以使用不同的延迟时间来创建连贯的动画效果 */
.meteor:nth-child(1) {
    left: -40%;
    animation-duration: 12s;
    animation-delay: 2s;
}

.meteor:nth-child(2) {
    left: -15%;
    animation-duration: 7s;
    animation-delay: 2s;
}

.meteor:nth-child(3) {
    left: 5%;
    animation-duration: 15s;
    animation-delay: 2s;
}

.meteor:nth-child(4) {
    left: 35%;
    animation-duration: 8s;
    animation-delay: 2s;
}

.meteor:nth-child(5) {
    left: 55%;
    animation-duration: 10s;
    animation-delay: 2s;
}

.home-head-isgaokao {
    margin-bottom: 60rpx;
}

.home-top-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100vw;
}
.xcxName {
    position: fixed;
    top: 40px;
    left: 32rpx;
    color: #fff;
    z-index: 100;
}
.home-top {
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    padding: 120rpx 32rpx 40rpx;
    box-sizing: border-box;
    z-index: 99;
    background-color: rgba(255, 68, 26, 1);
}

/* 地区 */
.area-box {
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.area-title {
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
}

.area-img {
    width: 40rpx;
    height: 40rpx;
}

/* 搜索 */
.search-box {
    width: 404rpx;
    height: 60rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    border-radius: 35rpx;
    padding: 0 32rpx;
    box-shadow: 0 2rpx 6rpx rgba(228, 228, 228, 0.5);
    flex: 1;
    margin-left: 10rpx;
    margin-right: 20rpx;
}

.search-bg {
    position: absolute;
    height: 88rpx;
    width: 456rpx;
}

.search-img {
    margin-left: 38rpx;
    width: 40rpx;
    height: 40rpx;
}

.search-placeholder {
    margin-left: 18rpx;
    font-size: 22rpx;
    color: #d8d8d8;
}

/* 天数 */
.day-box {
    position: relative;
}

.day-title {
    font-size: 20rpx;
    color: #fff;
}

.day-number {
    font-size: 24rpx;
    color: #fff;
    font-weight: bold;
}

/* 适合大学 */
.daxue-title {
    margin-top: 24rpx;
    height: 34rpx;
    font-size: 24rpx;
    color: #f4f4f4;
    font-weight: bold;
    text-align: center;
}

/* 适合个数 */
.danum-box {
    margin-top: 4rpx;
    height: 96rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: nowrap;
    justify-content: center;
}

.danum-number {
    font-size: 68rpx;
    color: #fff;
    font-weight: bold;
}

.danum-shuo {
    margin-bottom: 16rpx;
    font-size: 24rpx;
    color: #fff;
    font-weight: bold;
}

/* 信息 */
.home-info {
    margin-top: 20rpx;
    width: 690rpx;
    height: 74rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.info-box {
    width: 230rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.info-title {
    font-size: 24rpx;
    color: #ffbbac;
    font-weight: bold;
}

.info-content {
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
}

/* 智能填报 */
.tian-bao {
    margin-top: 32rpx;
    width: 428rpx;
    height: 76rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.tian-bao-bg {
    position: absolute;
    width: 428rpx;
    height: 76rpx;
}

.tian-bao-select-bg {
    position: absolute;
    left: 208rpx;
    width: 220rpx;
    height: 76rpx;
}

.tian-bao-box {
    width: 214rpx;
    height: 76rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tian-bao-title {
    font-size: 24rpx;
    color: #ff3b0a;
    font-weight: bold;
    text-align: center;
}

.tian-bao-select {
    color: #fff;
}

.view-top-bg {
    width: 100vw;
    height: 600rpx;
    position: relative;
    overflow: visible;
}

.view-top-bgg {
    width: 100vw;
    height: 600rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: -50rpx;
}

.view-top-1 {
    width: 100vw;
    height: 266rpx;
    display: flex;
    flex-direction: row;
    margin-top: 88rpx;
    justify-content: center;
    align-items: flex-end;

    .chat {
        width: 440rpx;
        height: 232rpx;
        display: flex;
        justify-content: center;
        text-align: center;
        position: relative;

        .img {
            .homeChatImg {
                width: 440rpx;
                height: 232rpx;
            }
        }

        .information {
            color: #ffffff;
            position: absolute;
            top: 120rpx;

            .top {
                display: flex;
                justify-content: center;
                text-align: center;

                .schoolnum {
                    font-size: 96rpx !important;
                    font-weight: bold;
                    line-height: 120rpx;
                    position: relative;
                }

                .num {
                    font-size: 20rpx;
                    line-height: 28rpx;
                    position: absolute;
                    bottom: 44rpx;
                    right: -20rpx;
                }
            }

            .bottom {
                display: flex;
                justify-content: center;
                text-align: center;

                .school {
                    font-size: 24rpx;
                    line-height: 34rpx;
                }
            }
        }
    }
}

// .view-top-1 .top-1-left {
//     width: 30%;
//     height: 220rpx;
//     position: relative;
//     display: flex;
//     flex-direction: column;
//     justify-content: center;
//     align-items: center;
//     box-sizing: border-box;
// }

// .view-top-1 .top-1-center {
//     width: 40%;
//     height: 276rpx;
//     position: relative;
//     display: flex;
//     flex-direction: column;
//     justify-content: center;
//     align-items: center;
//     padding-top: 40rpx;
//     box-sizing: border-box
// }

// .view-top-1 .top-1-right {
//     width: 30%;
//     height: 220rpx;
//     display: flex;
//     position: relative;
//     flex-direction: column;
//     justify-content: center;
//     align-items: center;
//     box-sizing: border-box;
// }

.view-top-title {
    position: relative;
    text-align: center;
    font-size: 18rpx;
    font-weight: 400;
    color: white;
    margin-left: -10rpx;
}

.view-top-score {
    text-align: center;
    font-size: 62rpx;
    font-weight: 600;
    color: white;
    padding-bottom: 45rpx;
}

.view-top-scoree {
    font-size: 46rpx;
    font-weight: 600;
    color: white;
    padding-bottom: 56rpx;
}

.view-top-fentext {
    font-size: 18rpx;
    font-weight: 600;
    color: white;
    position: absolute;
    right: 0rpx;
    top: 10rpx;
}

.view-top-fentext2 {
    font-size: 18rpx;
    font-weight: 600;
    color: white;
    position: absolute;
    right: 0rpx;
    top: 10rpx;
}

.view-top-20 {
    width: 100vw;
    height: 62rpx;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: rgba(252, 90, 49, 1);
    position: relative;
    top: -60rpx;
}

.view-top-2 {
    width: 100vw;
    display: flex;
    justify-content: center;
    text-align: center;

    .space-between {
        display: flex;
        justify-content: space-between;
    }

    .info {
        width: 100%;
        height: 76rpx;
        margin: 44rpx 106rpx 32rpx;

        .info-1,
        .info-2,
        .info-3 {
            font-size: 24rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;

            .info-1-top,
            .info-2-top,
            .info-3-top {
                display: flex;
                align-items: center;
                color: #ffad99;
                line-height: 34rpx;

                .text {
                    margin-right: 8rpx;
                }

                .info-1-image,
                .info-2-image {
                    width: 20rpx;
                    height: 20rpx;
                }
            }

            .info-1-bottom,
            .info-2-bottom,
            .info-3-bottom {
                // font-weight: bold;
                margin-top: 8rpx;
                color: #ffffff;
                line-height: 34rpx;

                .text {
                    margin-right: 8rpx;
                }
            }
        }
    }
}

.view-top-222 {
    width: 100vw;
    z-index: 2;
}

.view-top-2 .top-2-left {
    width: 245rpx;
    padding-top: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.view-top-2 .top-2-left .t-2-l-button {
    width: 108rpx;
    height: 44rpx;
    border-radius: 22rpx;
    border-width: 2rpx;
    border-style: solid;
    border-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 14rpx;

    .text {
        font-size: 22rpx;
    }
}

.view-top-2 .top-2-left .gk-btn {
    border-color: #d2d2d2;
}

.view-top-2 .top-2-left .text {
    text-align: center;
    font-size: 24rpx;
    line-height: 38rpx;
    font-weight: 600;
    color: #ffffff;
}

.view-top-2 .top-2-left .gk-btn .text {
    color: #d2d2d2;
}

.view-top-33 {
    height: 200rpx;
    width: 100vw;
    position: absolute;
    bottom: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.view-top-3 {
    width: 100vw;
    z-index: 99;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.view-top-3-center {
    width: 480rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .top-3-boxs {
        width: 460rpx;
        height: 76rpx;
        z-index: 3;
        border-radius: 40rpx;
        background: #ffffff;
        text-align: center;

        .top-3-box-ts {
            text-align: center;
            align-items: center;
            line-height: 76rpx;
            font-size: 40rpx;
            font-weight: 600;
            color: #ff3b0a;
        }
    }
}

.zhinengyijian {
    width: 520rpx;
    height: 76rpx;
    border-radius: 40rpx;
    box-shadow: 0px 3px 5px 0px #fc3519;
    background-color: white;
    display: flex;
    flex-direction: row;

    .top-3-box {
        width: 225rpx;
        height: 76rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9;
    }

    .zhinengtianbaobutton {
        width: 325rpx !important;
        display: flex;
        flex-direction: row;
        border-top-left-radius: 40rpx;
        border-bottom-left-radius: 40rpx;
        background-color: #ffffff;

        .zntb-img {
            width: 30rpx;
            height: 24rpx;
            line-height: 30rpx;
            margin-right: 20rpx;
        }
    }

    .top-3-box-t {
        text-align: center;
        font-size: 32rpx;
        font-weight: 600;
        color: #ffffff;
    }

    .top-3-box-t-zn {
        color: #ff3a31;
    }

    .top-3-boxing {
        font-size: 28rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        background: linear-gradient(to bottom, #fd5033, #fd3029);
    }
}

.homeheadwhite {
    width: 430rpx;
    height: 100rpx;
    position: absolute;
    left: 30rpx;
    top: 5rpx;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: visible;
}

.afontcolor {
    color: #000000 !important;
}

.homeheadBG {
    position: absolute;
    left: 0;
    top: -10rpx;
    right: 0;
    bottom: 0;
}

.homeheadyijian {
    width: 220rpx;
    height: 85rpx;
    position: absolute;
    left: -10rpx;
    top: 2rpx;

    right: 0;
    bottom: 0;
    z-index: -1;
}

.homeheadicon {
    width: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
}
</style>
